import React, { useCallback, useEffect, useState } from "react";
import styled from "styled-components";

import ReportModal from '@components/ReportModal'
/**
 * 用户权益
 * @constructor
 */

const UserRights = () => {
    const [reportVis, setReportVis] = useState(false);


    const handleLoginSuccess = useCallback(() => {
        setReportVis(false); // 确保关闭模态框
    }, []);

    const handleCancel = useCallback(() => {
        setReportVis(false);
    }, []);
    const openModal = () => {
        setReportVis(true)
        console.log(reportVis);

    }



    return (
        <Container>
            <ReportModal
                visible={reportVis}
                onCancel={handleCancel}
                onOk={handleCancel}
            />

            <FixedWrapper>
                <Icon className="facebook" onClick={openModal}>
                    举报
                </Icon>
            </FixedWrapper>

        </Container>
    )
};
const FixedWrapper = styled.div`
  /* 固定定位 */
  position: fixed;
  bottom: 20px;
  right: -700px;
  z-index: 1000;

  /* 保持原有样式 */
  display: inline-flex;
  list-style: none;
  height: 120px;
  width: 100%;
  padding-top: 40px;
  font-family: "Poppins", sans-serif;
  justify-content: center;

  /* 移动端适配 */
  @media (max-width: 768px) {
    bottom: 10px;
    right: 10px;
    height: 100px;
    padding-top: 30px;
  }
`;

const Icon = styled.div`
  position: relative;
  background: #fff;
  border-radius: 50%;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Facebook悬停效果 */
  &:hover {
    background: #1877f2;
    color: #fff;
    
    /* 悬停放大效果 */
    transform: translateY(-5px) scale(1.05);
  }

  /* 移动端优化 */
  @media (max-width: 480px) {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }
`;


const Container = styled.div`
  /* 基础布局 */
  box-sizing: border-box;
  margin: 1.875rem auto 0;  /* 合并margin定义 */
  position: relative;
  width: 100%;
  max-width: 1152px;        /* 响应式核心 */
  padding: 0 1.5rem;        /* 侧边留白 */

  /* Flex布局优化 */
  display: flex;
  flex-direction: column;    /* 纵向排列子元素 */
  gap: 2rem;                /* 子元素间距 */

  /* 过渡动画 */
  transition: all 0.3s ease;
      .right-block{
        border-radius: 2px;
        height: 100px;
        margin-right: 20px;
        padding: 20px 5px 20px 20px;
        position: relative;
        width: 272px;
        &:before{
            border: 1px solid rgba(0,0,0,.12);
            border-radius: 4px;
            color: #000;
            color: rgba(0,0,0,.12);
            content: " ";
            height: 200%;
            left: 0;
            position: absolute;
            top: 0;
            transform: scale(.5);
            transform-origin: 0 0;
            width: 200%;
        }

  /* 标签样式增强 */
  label {
    display: flex;
    flex-direction: column;  /* 纵向排列表单元素 */
    gap: 0.75rem;            /* 元素间距 */
    width: 100%;             /* 充满容器 */
    position: relative;

    textarea{
        line-height:20px;
    }

    /* 移动端优化 */
    @media (max-width: 768px) {
      gap: 0.5rem;
    }
  }

  /* 响应式处理 */
  @media (max-width: 1200px) {
    max-width: 90%;         /* 大屏适配 */
    padding: 0 1rem;
  }

  @media (max-width: 576px) {
    margin-top: 1rem;
    padding: 0 0.75rem;
    gap: 1.5rem;
  }
`;

export default UserRights;
